<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <el-breadcrumb
          v-if="$route.query.name !== undefined"
          separator-class="el-icon-arrow-right"
          class="clearfix"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row>
          <!-- 左侧 -->
          <el-col :span="12">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="标签名称">
                <el-input v-model="formInline.user"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.region" placeholder="请选择">
                  <el-option
                    :label="i.label"
                    :value="i.value"
                    v-for="i in selectState"
                    :key="i.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="inquire">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 右侧 -->

          <el-col class="right" :span="12">
            <!-- 返回学科按钮 -->
            <el-button
              v-show="$route.query.id&& $route.query.name"
              @click="returnSubject"
              type="text"
              style="margin-left: 600px"
            >
              <i class="el-icon-back"></i>
              返回学科
            </el-button>
            <el-button @click="addLabel" type="success" class="addLabel"
              ><i class="el-icon-edit"></i>新增标签
            </el-button></el-col
          >
        </el-row>
        <!-- 消息提示的文案 -->
        <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable='false'>
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="260">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称" width="300">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="300">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="250">
            <template slot-scope="scope">
              <span>{{ scope.row.timeOfEntry | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="230"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="disable(scope.row)">{{
                scope.row.state ? "禁用" : "启用"
              }}</el-button>
              <!-- 后台返回是0/1 1为true 0为false scope.row.state拿到返回值后进行转换 !为true!为false 转成布尔类型 -->
              <el-button
                type="text"
                :disabled="!!scope.row.state"
                @click="revise(scope.row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="deleteRow(scope.row)"
                :disabled="!!scope.row.state"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="query.page"
            :page-size="query.pagesize"
            background
            layout="total, prev, pager, next, sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>

        <!-- 新增 \ 编辑 弹窗 -->
        <el-dialog
          :title="isEdit ? '编辑标签' : '新增标签'"
          :visible.sync="dialogVisible"
          width="20%"
        >
          <tagsAdd
            @close="closeThePopUpWindow"
            :isEdit="isEdit"
            :id="id"
          ></tagsAdd>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import tagsAdd from '@/module-hmmm/components/tags-add.vue'
import dayjs from 'dayjs'
import { list, changeState, remove } from '@/api/hmmm/tags.js'

import { status123, status } from '@/api/hmmm/constants.js'
export default {
  name: 'aaa',
  // 导航守卫 (当子路由发生改变的时候 会触发该导航守卫)
  beforeRouteUpdate (to, form, next) {
    this.query.subjectID = null
    this.query.subjectName = null
    //   // 调用接口 渲染列表
    this.getListApi()
    next()
  },

  data () {
    return {
      // 分页
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      formInline: {
        user: null, // 标签名称
        region: null // 状态
      },
      // table 后台返回所有标签列表数据
      tableData: [],
      //   数据总条数
      counts: 0,
      // 状态
      selectState: status,
      // 弹框
      dialogVisible: false,
      isEdit: false,
      id: ''
    }
  },
  components: {
    tagsAdd
  },
  // 创建后 钩子函数
  created () {
    this.query.subjectID = this.$route.query.id
    this.query.subjectName = this.$route.query.name
    // 调用获取标签列表的函数
    this.getListApi()
  },
  methods: {
    // 点击返回学科
    returnSubject () {
      this.$router.back()
    },

    // 点击修改
    revise (i) {
      this.isEdit = true
      this.id = i
      this.dialogVisible = true
    },
    // 点击新增按钮
    addLabel () {
      // 如果是false就是新增
      this.isEdit = false
      // 开启弹窗
      this.dialogVisible = true
    },

    // 点击删除按钮
    async deleteRow (s) {
      // s为 现在一行的数据
      const rr = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (rr === 'cancel') {
        this.$message('取消删除')
        return
      }
      const res = await remove({ id: s.id })
      if (res.data.success === true) {
        this.$message.success('删除成功!')
      } else {
        this.$message.error('删除失败!')
      }
      this.getListApi()
    },
    // 点击查询事件
    async inquire () {
      this.query.page = 1
      this.getListApi()
      //   // 判断不能同时为空
      //   if (this.formInline.user === '' && this.formInline.region === '') {
      //     // 否则直接返回
      //     return
      //   }
      //   const res = await list({
      //     //   给后台传必须带的
      //     tagName: this.formInline.user,
      //     state: this.formInline.region
      //   })
      //   console.log(res)
      //   this.tableData = res.data.items
      //   this.counts = res.data.counts
    },
    // 清除input 内容
    clear () {
      // 点击清除的时候,把formInline里的user为空
      this.formInline.user = null
      this.formInline.region = null
      // 当点击清除时 重新铺设页面
      this.getListApi()
    },
    // 获取标签列表
    async getListApi () {
      // list(this.query) 接口是对象必须传对象 所以声明query 包着
    //   this.formInline.subjectID = this.$route.query.id
      // 此处用到解构赋值,当formInline里面的subjectID有值时传过去,然后调用接口会渲染当前ID的那些项
      const res = await list({
        ...this.query,
        tagName: this.formInline.user,
        state: this.formInline.region
      })
      //   console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 子传父 关闭弹窗
    closeThePopUpWindow () {
      this.dialogVisible = false
      this.getListApi()
    },

    // 枚举状态
    // cellValue是这个数组的内容
    formatter (row, column, cellValue, index) {
      // const接收 res ,status123用find查找方法当找到后就会返回对应的 对象 或者数组 item是每一个对象做全等
      const res = status123.find((item) => item.value === cellValue)
      // ellValue是后台返回的对应数据
      //   console.log(res)
      // console.log(cellValue)
      return res.label // 然后return
    },

    // 禁用按钮
    async disable (i) {
      if (i.state === 1) {
        // i为当前行数据
        // console.log(i)
        i.state = 0
      } else {
        i.state = 1
      }
      const res = await changeState({ id: i.id, state: i.state })
      console.log(res)
      if (res.data.success === true) {
        this.$message.success('操作成功')
      } else {
        this.$message.error('操作失败')
      }
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getListApi()
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getListApi()
    }
  },

  filters: {
    // 格式化入职日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>
.right {
 float: right;
}
.block {
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.clearfix {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(199, 199, 199);
}
.addLabel {
  float: right;
}
.el-alert{
    margin-bottom: 18px;
}
</style>
